<!-- 分享出去的砍价详情 -->
<template>
    <view class="page p-re" v-if="pageData">
        <view class="back bgwhite flexac" :style="{top: menuButtonTop+'px'}">
            <text class="iconfont icon-shouyeT211 black bold" @click="backHome()"></text>
        </view>
        <image :src="imgUrl + 'brgn_bg3.png'" mode="widthFix" class="topImg p-ab"></image>
        <view class="main p-re" :style="{backgroundImage:'url(' + imgUrl + 'brgn_book2.png' + ')'}">
            <view class="up p-re">
                <image :src="$imgUrls(pageData.v_headimg)" mode="aspectFill" class="avatar bor_radius p-ab"></image>
                <view class="color_44 text-center">
                    <view class="size26">小伙伴们，我<text v-if="share">在{{ share.title }}</text>发现一件好物</view>
                    <view class="size26">快来帮我砍价，获得{{ pageData.floor_price }}元低价拿</view>
                </view>
                <view class="goods padding30 bgf3 bor_radius_10 m-top50 d-flex">
                    <image :src="$imgUrls(pageData.img)" mode="aspectFill" class="img"></image>
                    <view class="p-left26 d-flex f-column j-sb flex-1">
                        <view class="size28 color_22 ellipsis">{{ pageData.name }}</view>
                        <view class="rect padding2-14 size22 color_FF3">已有{{ pageData.sales_number }}人{{ pageData.floor_price }}元拿 ></view>
                        <view class="btn_1 size22 white t-letter2 flexac">砍到{{ pageData.floor_price }}元拿</view>
                    </view>
                </view>
                <view class="p-left10 p-right10 m-top80 m-bot30 p-re">
                    <view class="tip size22 white p-ab flexac" :style="{left: parseFloat(pageData.percent) * 6.3 - 60 + 'rpx'}"
                        v-if="pageData.percent != 0">已坎{{ pageData.bargain_money }}元</view>
                    <u-line-progress :percentage="parseFloat(pageData.percent)" inactiveColor="#FDAFB5" height="9" :showText="false"></u-line-progress>
                    <view class="d-flex j-sb m-top18">
                        <view class="size22 color_66">原价<text class="size22 color_FF3 bold">{{ pageData.price }}元</text></view>
                        <view class="size22 color_66">底价<text class="size22 color_FF3 bold">{{ pageData.floor_price }}元</text></view>
                    </view>
                </view>
                <!-- 倒计时 -->
                <u-count-down :time="pageData.left_time" @change="onChange" v-if="pageData.status == 0">
                    <view class="flexac">
                        <view class="count" v-if="timeData.days">{{ timeData.days }}</view>
                        <text class="dot size22" v-if="timeData.days">天</text>
                        <view class="count">{{ timeData.hours<10?'0'+timeData.hours:timeData.hours }}</view>
                        <text class="dot">:</text>
                        <view class="count">{{ timeData.minutes<10?'0'+timeData.minutes:timeData.minutes }}</view>
                        <text class="dot">:</text>
                        <view class="count">{{ timeData.seconds<10?'0'+timeData.seconds:timeData.seconds }}</view>
                        <text class="size26 color_66 m-left20">后砍价过期</text>
                    </view>
                </u-count-down>

                <view class="text-center" v-if="pageData.status == 1 || pageData.status == 2">
                    <view class="size26 color_FF3 t-letter4" v-if="pageData.status == 1">砍价已成功，感谢您的帮助</view>
                    <view class="color_FF3 t-letter4" v-if="pageData.status == 2">
                        <view class="size26">很遗憾，砍价因超时失败</view>
                        <view class="size26">快联系小伙伴重新发起砍价吧</view>
                    </view>
                </view>

                <view class="d-flex j-sa m-top50">
                    <view class="size32 white flexac" :class="pageData.button.length == 1 ? 'btn_3' : 'btn_2'" @click="btnClick(item.type)"
                        v-for="(item,index) in pageData.button" :key="index">{{ item.text }}</view>
                </view>

            </view>
            <view class="down p-re">
                <view class="flexac" style="height: 136rpx;">
                    <u-tabs :list="tabList" lineColor="linear-gradient(90deg, #F41C26, #FFB47B)" lineWidth="72" lineHeight="2" 
                        :inactiveStyle="{color:'#848484',fontSize:'30rpx',transform:'scale(1)'}" @click="tabClick"
                        :activeStyle="{color:'#F6302E',fontSize:'30rpx',fontWeight:'bold',transform:'scale(1.2)'}"></u-tabs>
                </view>
                <view class="cont">
                    <view class="p-left60 p-right50" v-if="!curTab && pageData.help">
                        <view class="item d-flex a-center" v-for="(item,index) in pageData.help" :key="index">
                            <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="avatar bor_radius"></image>
                            <view class="flex-1 p-left30 p-top4">
                                <view class="size30 color_33 bold ellipsis">{{ item.v_name }}</view>
                                <view class="h6 color_99">{{ item.add_tim }}</view>
                            </view>
                            <view class="size28 color_44">砍掉了<text class="price size28 bold">{{ item.bargain_money }}</text>元</view>
                        </view>
                    </view>
                    <view class="color_99 text-center t-letter4 p-top60" v-if="!curTab && !pageData.help">
                        <image :src="imgUrl + 'brgn_empty.png'" mode="widthFix" style="width: 322rpx;"></image>
                        <view class="size22 line34 m-top30">还没有砍价记录</view>
                        <view class="size22 line34">赶紧帮助好友砍价吧</view>
                    </view>
                    <view class="padding30-50" v-if="curTab">
                        <u-parse :content="pageData.content" :domain="$imgUrl"></u-parse>
                    </view>
                </view>
                <view class="line p-ab"></view>
            </view>
        </view>

        <u-overlay :show="showResult" @click="showResult = false">
            <view class="flexac height">
			    <view class="result bor_radius_30s p-re" @tap.stop>
                    <image class="head p-ab" :src="imgUrl + 'brgn_head.png'" mode="widthFix"></image>
                    <view class="close p-ab" @click="showResult = false">
                        <u-icon name="close-circle" size="30" color="#fff"></u-icon>
                    </view>
                    <view class="outer bgwhite">
                        <view class="inner wh p-re p-top40 text-center">
                            <image :src="$imgUrls(pageData.v_headimg)" mode="aspectFill" class="avatar bor_radius p-ab"></image>
                            <view class="size34 bold m-bot50">少侠好刀法</view>
                            <view class="size32 m-bot20">我帮TA砍掉了</view>
                            <view>
                                <text class="size56 bold m-right10">{{ money }}</text>
                                <text class="size36">元</text>
                            </view>
                        </view>
                    </view>
                    <view class="btn size30 white bold flexac margin40" @click="btnClick(5)">我也要玩</view>
                </view>
		    </view>
        </u-overlay>

        <showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            record_id: '',
            pageData: '',
            money: '',
            imgUrl: this.imgUrl + 'Uploads/diy/img/',
            timeData: {},
            curTab: 0,
            tabList: [
                { name: '砍价记录' },
                { name: '商品详情' }
            ],
            showResult: false,
            menuButtonTop: getApp().globalData.menuButtonObject.top, // 胶囊按钮的top值
            showModal: false
        }
    },
    computed: {
        ...mapState(['vid', 'share'])
    },
    onLoad(e){
        if(e.record_id) this.record_id = e.record_id
        this.getDetail()
    },
    methods: {
        getDetail(){
            this.$http.get({
                url: '/BargainApi/recordDetail',
                data: {
                    record_id: this.record_id
                }
            }).then(res=>{
                this.pageData = res.data
            })
        },
        helpBargain(){
            this.$http.post({
                url: '/BargainApi/helpBargain',
                data: {
                    record_id: this.record_id
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.money = res.data
                this.showResult = true
                this.getDetail()
            })
        },
        btnClick(type){
            console.log('type', type)
            if(!this.vid) return this.showModal = true
            if(type == 4){ // 帮忙砍一刀
                this.helpBargain()
            } else if (type == 5){ // 我也要玩
                this.toUrl('/activityPage/bargain/bargainDetail?act_id='+this.pageData.act_id+'&goods_id='+this.pageData.goods_id)
            }
        },
        onChange(e){
            this.timeData = e
        },
        tabClick({index}){
            this.curTab = index
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    background: #EE4633;
    padding: 600rpx 30rpx 40rpx 30rpx;
    .back {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        opacity: 0.6;
        position: fixed;
        left: 24rpx;
        z-index: 100;
    }
    .topImg {
        left: 0;
        top: 0;
    }
}
.main {
    height: 1642rpx;
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 10;
    .up {
        height: 867rpx;
        margin-bottom: 36rpx;
        padding: 118rpx 20rpx 70rpx 20rpx;
        .avatar {
            width: 120rpx;
            height: 120rpx;
            top: -32rpx;
            left: 50%;
            margin-left: -60rpx;
            z-index: 20;
        }
        .goods {
            height: 220rpx;
            .img {
                width: 160rpx;
                height: 160rpx;
            }
            .rect {
                width: fit-content;
                border: 1px solid;
                border-image: linear-gradient(-90deg, #F41C26, #FFA35E) 1;
                border-radius: 2rpx;
            }
            .btn_1 {
                width: fit-content;
                padding: 0 20rpx;
                height: 46rpx; 
                background: #FF3942;
                border-radius: 23rpx;
            }
        }
        .tip {
            min-width: 140rpx;
            height: 50rpx;
            background: #FFBD4E;
            border-radius: 6rpx;
            top: -64rpx;
            &::after {
                content: '';
                width: 0;
                height: 0;
                border: 20rpx solid;
                border-color: #FFBD4E transparent transparent transparent;
                position: absolute;
                bottom: -30rpx;
                left: 50%;
                margin-left: -20rpx;
            }
        }
        .count {
            width: 42rpx;
            line-height: 42rpx;   
            background: #FFD0A0;
            font-size: 26rpx;
            color: #810000;
            font-weight: bold;
            text-align: center;
        }
        .dot {
            font-size: 34rpx;
            color: #810000;
            font-weight: bold;
            margin: 0 12rpx;
        }
        .btn_2 {
            width: 270rpx;
            height: 66rpx;   
            background: linear-gradient(-90deg, #F41C26, #FFA35E);   
            box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(135,86,56,0.3);
            border-radius: 33rpx;
            &:last-child {
                background: linear-gradient(-90deg, #FF6519, #FFC467);  
            }
        }
        .btn_3 {
            width: 408rpx;
            height: 76rpx; 
            background: linear-gradient(-90deg, #FF6519, #FFC467);
            box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(135,86,56,0.3);
            border-radius: 38rpx;
        }
    }
    .down .cont {
        height: 513rpx;
        overflow-x: hidden;
        overflow-y: auto; 
        .item {
            height: 128rpx;
            border-bottom: 1rpx solid #E6E6E6;
            .avatar {
                width: 80rpx;
                height: 80rpx;
            }
            .price {
                color: #FF0030;
            }
        }
    }
    .line {
        width: 632rpx;
        height: 2rpx;
        left: 37rpx;
        top: 136rpx;
        background-image: linear-gradient(to right, #FF9B7B 60%, rgba(255,255,255,0) 0%);
        background-position: bottom;
        background-size: 24rpx 1rpx;
        background-repeat: repeat-x;
    }
}
::v-deep .u-line-progress__line {
    background: linear-gradient(-90deg, #F41C26, #FFA35E);
}
.result {
    width: 542rpx;
    height: 662rpx;  
    background: linear-gradient(0deg, #FF5C36, #FFC467);
    padding: 166rpx 25rpx 0 25rpx;
    .head {
        width: 512rpx;
        top: 8rpx;
        left: 15rpx;
    }
    .close {
        left: 50%;
        margin-left: -30rpx;
        bottom: -90rpx;
    }
    .outer {
        height: 338rpx;
        border-radius: 16rpx;
        padding: 12rpx;
        .inner { 
            border: 1px solid #FFC467;
            border-radius: 16rpx;
            color: #FF652E;
            .avatar {
                width: 100rpx;
                height: 100rpx;
                left: 50%;
                margin-left: -50rpx;
                top: -80rpx;
                z-index: 10;
            }
        }
    }
    .btn {
        width: 395rpx;
        height: 75rpx;
        background: #FFC478;
        box-shadow: 0rpx 10rpx 0rpx 0rpx #CF6D0E;
        border-radius: 37rpx;
    }
}
</style>